(function(){

  var btn = document.getElementById('btn');
  var op = document.getElementById('op');
  var item = document.getElementById('item');

  item.style.left = '180px';
  item.style.top = '180px';
  item.style.transform = 'rotate(0deg)';

  btn.onclick = function(){
    var value = op.value;
    run(value);
  }


  function run(value){

    var item = document.getElementById('item');
    var left = parseInt(item.style.left);
    var top = parseInt(item.style.top);
    var angle = parseInt(item.style.transform.slice(7));

    if(value == 'GO'){
      if(angle ==  0){
        top -= 30;
        if(top >= 30){
          item.style.top = top + 'px';
        }
      }else if(angle == 90){
        left += 30;
        if(left <= 300){
         item.style.left = left + 'px';
        }
      }else if(angle == 180){
        top += 30;
        if(top <= 300){
          item.style.top = top + 'px';
        }
      }else if(angle == 270){
        left -= 30;
        if(left >= 30){
          item.style.left = left + 'px';
        }
      }
    }

    if(value == 'TUN LEF'){
      if( angle == 0){
        angle = 270;
      }else{
        angle -= 90;
      }
      item.style.transform = 'rotate(' + angle + 'deg)';
    }

    if(value == 'TUN RIG'){
      if (angle == 270){
        angle = 0
      }else{
        angle += 90;
      }
      item.style.transform = 'rotate(' + angle + 'deg)';
    }

    if(value == 'TUN BAC'){
      angle +=180;
      if(angle >= 360){
        angle -= 360;
      }
      item.style.transform = 'rotate(' + angle + 'deg)';
    }
  }

})();